window.onload=function(){
    linkto()
//表格上全选按钮 1
//操作栏 全选
let choiceAlls=document.querySelectorAll('.choiceAll');
//表格上单选按钮 2
let checkedInps=document.querySelectorAll('.checkedInp');
//单价 2
let prices=document.querySelectorAll('.price');
//数量 2
let numbers=document.querySelectorAll('.number');
//小计 2
let totles=document.querySelectorAll('.totle');
//表格中删除按钮 多个
let dels=document.querySelectorAll('.del');
//表格中 + 2
let pluses=document.querySelectorAll('.plus');
//表格中 - 2
let subtractions=document.querySelectorAll('.subtraction');


//操作栏 删除选中
let choiceDel=document.querySelector('.choiceDel');
//操作栏 结算按钮
let settlement=document.querySelector('.settlement');
//操作栏 总价
let money=document.querySelector('.money');
//操作栏 已选商品数量
let choiceNum=document.querySelector('.choiceNum');

//抽离重复代码  计算已选商品数量 总价
function numMoney(){
    let num1=0;
    let num2=0;
    for(let j=0;j<checkedInps.length;j++){
        if(checkedInps[j].checked){
            // 已选商品数量
            num1+=parseInt(numbers[j].value);
            //  总价 也可以用小计这个之和
            num2+=parseFloat(prices[j].innerText) * parseFloat(numbers[j].value);
        }
    }
    // 最后赋值给choiceNum
    choiceNum.innerText=num1;
    //赋值总价
    money.value=num2.toFixed(2);
}

// 监听 + - 控制   数量  小计 操作栏中已选商品数量 总价
// 加
for(let i=0;i<pluses.length;i++){
    pluses[i].addEventListener('click',function(){
        let num=this.previousElementSibling.firstElementChild.value;
        num++;
        this.previousElementSibling.firstElementChild.value=num;
        // 小计        
        totles[i].innerText=(parseFloat(numbers[i].value)* parseFloat(prices[i].innerText)).toFixed(2) ;

        // 操作栏中已选商品数量
        //先判断是否选中 选中的数量之和
        numMoney()
    })
// 减
    subtractions[i].addEventListener('click',function(){
        let num=this.nextElementSibling.firstElementChild.value;
        num--;
        if(num>=1){
            this.nextElementSibling.firstElementChild.value=num;
        }else{
            this.nextElementSibling.firstElementChild.value=1;
            alert('客官，已经是最少啦！')
        }
        // 小计
        totles[i].innerText=(parseFloat(numbers[i].value)* parseFloat(prices[i].innerText)).toFixed(2);
        
        numMoney()
    })
// 数量input框 input事件  计算小计 监听
    numbers[i].addEventListener('input',function(){
        if(numbers[i].value<1){
         numbers[i].value=1
        }
        totles[i].innerText=(parseFloat(numbers[i].value)* parseFloat(prices[i].innerText)).toFixed(2);
        numMoney()
    })
// 表格中删除按钮 删除本行
    dels[i].addEventListener('click',function(){
        this.parentNode.parentNode.remove()
    })

}
//操作栏 删除选中
    choiceDel.addEventListener('click',function(){
        for(let j=0;j<checkedInps.length;j++){
            if(checkedInps[j].checked){
                checkedInps[j].parentNode.parentNode.remove()
            }
        }
    })

// 点击全选按钮 全选
for(let j=0;j<choiceAlls.length;j++){
    choiceAlls[j].addEventListener('click',function(){
        // 方法一
         // 将所有的all 复选框  checked 属性 设置为 当前触发事件的事件源的 checked值
        //  for (let j = 0; j < alls.length; j++) {
        //     alls[j].checked = this.checked
        // }
        // 全选---将所有的子复选框 选中
        // 反选---将所有的子复选框 取消选中
        // for (let m = 0; m < childs.length; m++) {
        //     childs[m].checked = this.checked
        // }
        // 方法二
        let boolean=true;
        if(!choiceAlls[j].checked){
            boolean=false;
        }
        for(let i=0;i<checkedInps.length;i++){ 
            checkedInps[i].checked=boolean;
            choiceAlls[i].checked=boolean;
        }
        numMoney()
    })
    
}
//有一个选项没选时 全选按钮checked=false
for(let i=0;i<checkedInps.length;i++){ 
    checkedInps[i].addEventListener('click',function(){
        let status=true;
        // 另起循环 筛选所以checked的选中状态
        for(let l=0;l<checkedInps.length;l++){
            if(!checkedInps[l].checked){
            status=false;
            }
        }
        for(let j=0;j<choiceAlls.length;j++){
            choiceAlls[j].checked=status;
        }  
        numMoney()
    })
}


// 猜你喜欢优化 方法3
// 拿父节点
let populerContent=document.querySelector('.populer-content');
let div=document.createElement('div');
div.className='populer-itembox';
let starstr='';
for(let i=0;i<4;i++){
    starstr+=`
    <div class="populer-item fl">
    <div class="populer-item-img">
    </div>
    <div class="populer-item-text">
        <div class="populer-item-icon">
            8折
        </div>
        <p class="populer-item-writer">白夜行  &nbsp; 东野上吾</p>
        <div class="populer-item-star">
            <div class="cred fl">推荐：</div>
            <div class="populer-item-starbox fl">
                <div class="star-null"></div>
                 <div class="star-solid"></div>
            </div>
        </div>
        <p class="new-oldprice">
            <span class="populer-item-newprice">￥:38</span> 
            <span class="populer-item-oldprice lt">￥:58</span> 
        </p>
    </div>
    </div>
    `
}
div.innerHTML=starstr
populerContent.appendChild(div);





}